<template>
  <div class="transition-menu">
      <div class="headCrm-good-class mlcbg">
        <p class="billHead">
          <span class="el-icon-arrow-left" @click="returnPage"></span>
          <span class="headFont">选择商品分类</span>
          <button class="submit-follow" @click="submitApply">提交</button>
        </p>          
      </div>
    <div class="allClass">
        <button @click="allClassbut">全部分类</button>
    </div>
    <div>
        <span class="el-icon-caret-right"></span>
        <button @click="isActive = !isActive">电工电料</button>
    </div>
    <collapse>
        <div class="container" v-show="isActive">
            <div>
                <p>开关插座</p>
                <div>开关</div>
                <div>插座</div>
                <div>功能键</div>
            </div>
            <div>
                <p>电器连接</p>
                <div>电料配件</div>
            </div>
            <div>
                <p>电器保护</p>
                <div>配电箱</div>
            </div>
            <div>
                <p>电缆/电线/配件</p>
                <div>电缆</div>
                <div>电线</div>
                <div>配件</div>
            </div>              
        </div>
    </collapse>
    <div>
        <span class="el-icon-caret-right"></span>
        <button @click="isActivetool = !isActivetool">照明灯具</button>
    </div>
    <collapse>
        <div class="container" v-show="isActivetool">
            <div>
                <p>灯具</p>
                <div>吊/壁/地灯</div>
                <div>台灯</div>
                <div>镜前灯</div>
            </div>
            <div>
                <p>工矿灯具</p>
                <div>工矿灯</div>
                <div>手提灯</div>
                <div>应急灯</div>
            </div>
        </div>
    </collapse>
    <button @click="chouti">抽屉</button>
  </div>
</template>
<script>
import collapse from "../assets/js/collapseTop.js";
export default {
 data() {
  return {
   isActive: false,
   isActivetool: false,
  };
 },
 methods:{
    allClassbut:function(){
        if(this.isActive==true||this.isActivetool==true){
            this.isActive=false;
            this.isActivetool=false;
        }else{
            this.isActive=true;
            this.isActivetool=true;            
        }
    },
    returnPage:function(){
        this.$router.push({
            path:'/partGoodsSelection'
        })           
    },
    submitApply:function(){
        this.$router.push({
            path:'/partGoodsSelection'
        })                   
    },
    chouti:function(){
        this.$router.push({
            path:'/transitionRL'
        })          
    }
 },
 components: {
  collapse
 }
};
</script>

<style scoped>
/* headCrm-good-class */
  .headCrm-good-class{
        width:100%;
  }
  .billHead{
    text-align:center;
    font-size: 0.33rem;
    color:#fff;  
    padding:0.33rem 0; 
    clear: none; 
  }
  .el-icon-arrow-left{
      position:absolute;
      left: 0.3rem;
      top:0.2rem;
      font-size: 0.6rem;
  }
  .submit-follow{
      width: 1rem;
      position:absolute;
      right: 0.3rem;
      top:0.25rem;
      background-color: #ff5000;
      line-height:0.5rem;
      text-align:center;
      color:#fff;
      border: 0.01rem solid #ffffff;
      border-radius:0.33rem;
      box-shadow:0.05rem 0.05rem 0.1rem #646464;;
  }
.transition-menu{
    color:#646464;
}
.allClass{
    margin-left: 0.44rem;
    margin-top:0.16rem;
}
.transition-menu>div>button{
    font-size: 0.33rem;
    background-color: #fff;
    border: none;
    margin-left: 0.1rem;
    height: 0.8rem;
    width:80%;
    display:inline-block;
    text-align:left;
    color:#646464;
    
}
.transition-menu>div>span{
    margin-left: 0.1rem;
}
.container{
    font-size: 0.27rem;
    margin-left: 0.8rem;
    margin-top: 0.1rem;
}
.container p,.container>div>div{
    margin-bottom: 0.23rem;
}
.container>div>div{
    margin-left: 0.38rem;
}
.colorLi{
    color:#ff5000;
}
</style>